<template>
  <div class="home">
    <van-search v-model="SearchValue"  shape="round" placeholder="请输入搜索关键词" disabled
      @click="handleClickSearch" 
     />
    <van-swipe class="my-swipe"  :autoplay="3000" indicator-color="darkred">
        <van-swipe-item v-for="item in banner" :key="item.id">
          <img :src="item.image_url" width="100%" style="display: block;" alt />
        </van-swipe-item>
      </van-swipe>

      <transition name="van-fade">
      <div class="popup-shadow" v-show="$store.state.isShowPopupShow"></div>
      </transition>
      <transition name="van-slide-right">
        <router-view></router-view>
      </transition>
    
  </div>
 
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
// import axios from "axios"



import {GetHomeList, } from '@/request/api'

export default {
  name: 'Home',
  data() {
    return {
      SearchValue: "",
      //轮播图数组
      banner: [],
    };
  },
  methods: {
    handleClickSearch() {
      this.$router.push('/home/searchPopup')
      // 修改vuex中的 isShowPopupShow 值为true
      // this.$store.commit("changeIsShowPopupShow", true)
    }
  },
  created() {

    // request.get("/index/index")
    GetHomeList()
    .then(res => {
      // console.log("success!!!!!111");
      // console.log(res);
      this.banner = res.data.data.banner
      // console.log(this.banner);
    })
    .catch(err => {
      console.log("error");
      console.log(err);
    })
  },
  components: {
    
  },
   
}
</script>
<style lang="less">
.popup-shadow {
  width: 100%;
  height: 100%;
  position: absolute; 
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .5);
  z-index: 20;
}
  // .slide-enter, .slide-leave-to {
  //   // 过渡之前的样式写在这里
  //    right: -100%;
  // }
  // .slide-enter-active,.slide-leave-active  {
  //   // 过渡属性写在这里
  //   transition: all .3s;
  // }
  // .slide-enter-to, .slide-leave {
  //   // 过渡之后的样式写在这里
  //    right: 0;
  // }

  
</style>
